<template>
  <div id="up1">
    <h2>贴标机</h2>
    <el-date-picker
      clearable
      v-model="tbTime"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="请选择测试时间"
      style="margin-left: 20px"
    >
    </el-date-picker>
    <el-button
      type="primary"
      icon="el-icon-search"
      size="mini"
      @click="handleQuery"
      style="margin-left: 20px"
      >搜索</el-button
    >
    <div class="proCharts" ref="echarts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { tbNum } from "@/api/system/zdsx.js";
import axios from "axios";
export default {
  data() {
    return {
      loading: false,
      tbTime: "",
    };
  },
  mounted() {
    this.getOilList();
  },
  methods: {
    getOilList() {
      this.loading = true;
      tbNum(this.tbTime).then((res) => {
        const option = {
          xAxis: {
            data: [
              "0",
              "1：00",
              "2：00",
              "3：00",
              "4：00",
              "5：00",
              "6：00",
              "7：00",
              "8：00",
              "9：00",
              "10：00",
              "11：00",
              "12：00",
              "13：00",
              "14：00",
              "15：00",
              "16：00",
              "17：00",
              "18：00",
              "19：00",
              "20：00",
              "21：00",
              "22：00",
              "23：00",
              "24：00",
            ],
          },
          yAxis: {
            type: "value",
          },
          legend: {
            data: ["生产数量(个)"],
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          series: [
            {
              name: "生产数量(个)",
              data: res.data,
              type: "bar",
            },
          ],
        };
        const E = echarts.init(this.$refs.echarts);
        E.setOption(option);
      });
    },
    handleQuery() {
      this.getOilList();
      console.log(1111111);
    },
  },
};
</script>

<style>
.proCharts {
  width: 100%;
  height: 600px;
  /* margin-top: -300px; */
}
h2 {
  font-size: 35px;
  text-align: center;
  color: #0072c6;
}
</style>
